<template>
    <div class="platform-page page">
        <div class="content">
            <PlatformCrumb back="返回">
                <span slot="right" class="operation">批量操作</span>
                <el-button type="primary" @click="updatelistClick" class="pass-btn" size="mini" slot="right">审核通过
                </el-button>
                <el-button type="primary" @click="deletelistClick" size="mini" slot="right">删除记录</el-button>
            </PlatformCrumb>
            <div class="table">
                <el-table
                        :header-cell-style="{background:'#F7F7F7',color:'#333333'}"
                        ref="multipleTable"
                        :data="list"
                        stripe
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="id" label="序号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="机构" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="businessLicence" label="营业执照" show-overflow-tooltip>
                        <!--插入图片链接的代码-->
                        <template slot-scope="scope">
                            <img v-if="scope.row.businessLicence!=''" :src="scope.row.businessLicence|filtersImg" alt=""
                                 style="width: 55px;height: 37px;margin:1px;border:1px solid #BBBDBF;vertical-align: middle;">

                        </template>
                    </el-table-column>
                    <el-table-column prop="leaderName" label="负责人" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="leaderPhone" label="负责人手机号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="opera" label="操作" show-overflow-tooltip>
                        <!-- <template slot-scope="scope">
                          <el-button @click="handleClick(scope.row)" type="text" size="small">审核通过</el-button>
                        </template> -->
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">审核通过</el-button>
                            <el-button @click="deleteClick(scope.row)" class="del-btn" type="text" size="small">删除记录
                            </el-button>
                            <el-button @click="godetail(scope.row.id)" type="text" size="small">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        v-if="total!=0"
                        class="listingpagination"
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <div v-show="isdelete" @click="delete_fun" class="mask"></div>
        <div v-show="isdelete" class="delete_sai delete_flex_start">
            <div class="delete_sai_body shenqingsuccess">
                <div class="delete_sai_body2 delete_jiaoan">
                    <span class="isdeleteja">
                            已删除
                    </span>
                    <div class="deletequre cur" @click="delete_fun">
                        确认
                    </div>
                </div>
            </div>
            <i class="el-icon-circle-close cur" @click="delete_fun"></i>
        </div>
        <div v-show="issuccess" @click="success_fun" class="mask"></div>
        <div v-show="issuccess" class="delete_sai delete_flex_start">
            <div class="delete_sai_body shenqingsuccess">
                <div class="delete_sai_body2 delete_jiaoan">
                    <span class="isdeleteja">
                            提交申请成功！！可在首页中查看<br>教练相关信息
                    </span>
                </div>
            </div>
            <i class="el-icon-circle-close cur" @click="success_fun"></i>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {mechanismTypeList, mechanismdelList, mechanismupdateType} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb,
        },
        data() {
            return {
                list: [],
                total: 0,
                pageSize: 10,
                pageNum: 1,
                isdelete: false,
                issuccess: false,
                ids: {
                    ids: []
                }
            };
        },
        methods: {
            godetail(e){
                var that = this;
                that.$router.push({
                    path: '/platform/listingdetail',
                    query: {
                        id: e
                    }
                })
            },
            handleClick(e) {
                console.log(e);
                this.ids.ids = []
                var id = e.id
                this.ids.ids.push(id)
                this.mechanismupdateType()
            },
            deleteClick(e) {
                this.ids.ids = []
                var id = e.id
                this.ids.ids.push(id)
                this.mechanismdelList()
            },
            delete_fun() {
                this.isdelete = !this.isdelete
            },
            success_fun() {
                this.issuccess = !this.issuccess
            },
            deletelistClick() {
                var that = this;
                console.log(that.ids.ids);
                if (that.ids.ids.length > 0) {
                    this.mechanismdelList()
                } else {
                    this.$message.error('还没有选择记录');
                }
            },
            updatelistClick() {
                var that = this;
                console.log(that.ids.ids);
                if (that.ids.ids.length > 0) {
                    this.mechanismupdateType()
                } else {
                    this.$message.error('还没有选择记录');
                }
            },
            handleSelectionChange(e) {
                var that = this;
                that.ids.ids = []
                for (var i = 0; i < e.length; i++) {
                    console.log(e);
                    that.ids.ids.push(e[i].id)
                }
                console.log(that.ids.ids);
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.getList()
            },
            getList() {
                var that = this;
                mechanismTypeList({
                    "pageNum": that.pageNum,
                    "pageSize": that.pageSize,
                }).then(res => {
                    if (res.code == 200) {
                        that.list = res.data.list
                        that.total = res.data.total
                    }
                });
            },
            // 删除记录
            mechanismdelList() {
                var that = this;
                mechanismdelList(that.ids).then(res => {
                    if (res.code == 200) {
                        that.delete_fun()
                        that.getList()
                    }
                });
            },
            // 审核记录
            mechanismupdateType() {
                var that = this;
                mechanismupdateType(that.ids).then(res => {
                    if (res.code == 200) {
                        that.success_fun()
                        that.getList()
                    }
                });
            },
        },
        created() {
            this.getList()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }
    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    .operation {
        margin-right: 25px;
    }

    .pass-btn {
        background-color: #2d64b3;
        border-color: #2d64b3;

        &:hover {
            background-color: #2d64b3;
            border-color: #2d64b3;
        }
    }

    .table {
        .del-btn {
            color: #c60818;
        }

    }

</style>
